import React, { useEffect, useState } from 'react'
import './index.less'
import { getValentinTaskList, getValentinRankList } from '../../../api/active'
import { GetUserInfo } from '../../../api/mine'
import { Toast } from 'antd-mobile'

import img1 from '../../../images/valentine_rank/reward1.png'
import img2 from '../../../images/valentine_rank/reward2.png'
import img3 from '../../../images/valentine_rank/reward3.png'
import appSdk from '../../../utils/app_sdk'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { compareVersions, getVersion } from '../../../utils/util'

const btnTxt = ['未完成', '未完成', '待送礼', '待收礼', '去拉新', '去绑定', '去参加', '待赠送', '待充值']

export default function ValentineRank() {
  const params = useSearchParams()[0]
  const navigate = useNavigate()
  const [type, setType] = useState(+params.get('type') || 1)
  const [taskList, setTaskList] = useState([])
  const [rankList, setRankList] = useState([])

  const [userinfo, setUserinfo] = useState()

  useEffect(() => {
    Toast.show({
      content: '加载中...',
      icon: 'loading',
      maskClickable: false
    })
    if (compareVersions(getVersion() || '1.0.0', '2.2.0') !== -1) {
      appSdk('setFullScreen', 1)
    }
    getValentinTaskList().then((res) => {
      console.log(res)
      setTaskList(res.data || [])
    })
    GetUserInfo().then((result) => {
      getValentinRankList()
        .then((res) => {
          console.log(res)
          setRankList(res.data?.list || [])
          setUserinfo({
            ...result.data,
            my_point: res.data?.my_point || 0,
            my_rank: res.data?.my_rank || 0
          })
        })
        .finally(() => {
          Toast.clear()
        })
      // nickname headimgurl
    })
  }, [])

  // const findRank = () => {
  // 	return rankList?.findIndex((item) => item.user_id === userinfo.id) + 1
  // }

  useEffect(() => {
    setType(+params.get('type') || 1)
    window.scrollTo({
      top: 0
    })
  }, [params])

  const btnText = (a, b, idx) => {
    if (a === b) return '已完成'
    if (a < b) return btnTxt[idx]
  }

  const action = (index) => {
    // eslint-disable-next-line default-case
    switch (index) {
      case 0:
        // 在砂砂舞房间约主播跳舞 测试 1185077 线上11
        appSdk('activeJumpToRoom', 1185077)
        break
      case 1:
        // 七夕当天登录
        break
      case 2:
        // 送礼
        break
      case 3:
        // 收礼
        break
      case 4:
        // 拉新
        appSdk('jumpToActivity')
        break
      case 5:
        // cp
        // setType(3)
        navigate('/valentine/rank?type=3&isFullScreen=1')
        break
      case 6:
        // 参与抽奖
        navigate('/valentine?isFullScreen=1')
        break
      case 7:
        // 赠送七夕限定爱萌熊礼物
        appSdk('activeJumpToRoom', 0)
        break
      case 8:
        // 活动期间累计充值77爱Dou
        navigate('/recharge')
        break
    }
  }

  return (
    <div className="valentine_rank_bg">
      <div className="back_icon" onClick={() => appSdk('backPress')}></div>
      <div className="active_content">
        <div className="top_title">{type === 3 ? 'CP关系' : '活动奖励'}</div>
        {type !== 3 ? (
          <div className="top_content">
            <div className="item">
              <img src={img1} alt="" />
              <div className="name">情定七夕</div>
              <div className="type">头像框</div>
            </div>
            <div className="item">
              <img src={img2} alt="" />
              <div className="name">天鹅之吻</div>
              <div className="type">进场特效</div>
            </div>
            <div className="item">
              <img src={img3} alt="" />
              <div className="name">777{window.baseConfig.coin_name}</div>
              <div className="type">{window.baseConfig.coin_name}</div>
            </div>
          </div>
        ) : null}
        {type !== 3 ? (
          <div className="sub_tit_content">
            <div onClick={() => setType(1)} className={`tit left ${type === 1 ? 'active' : ''}`}></div>
            <div onClick={() => setType(2)} className={`tit right ${type === 2 ? 'active' : ''}`}></div>
          </div>
        ) : null}

        <div className="content">
          {/* 任务 */}
          {type === 1 ? (
            <div className="task_content">
              {taskList.map((item, idx) => (
                <div className="task_item" key={item.id}>
                  <div className="tit">
                    <span>{item.name}</span>
                    {item.need_num !== 99999 ? (
                      <span className={`num`}>
                        {item?.complete_num}/{item?.need_num}
                      </span>
                    ) : (
                      <span className="no_limit">不限次</span>
                    )}
                  </div>
                  <div className="point">积分+{item.reward_num}</div>
                  <div className="btn" onClick={() => action(idx)}>
                    {btnText(+item?.complete_num, +item?.need_num, idx)}
                  </div>
                </div>
              ))}
              <div className="rule">
                <div className="top_title">活动玩法</div>
                <div>
                  <p className="t">
                    参与本次话动前，请您详细阅读活动规则及相关条款。凡参与本次活动，则视为您已阅读、理解并同意活动规则及注意事项全部内容。
                  </p>
                  <p>
                    1、参与活动完成指定活动任务获得相应积分，积分越多排行越高，活动结束后，排行前三的用户会获得奖励，包括但不限于：头像框，进场特效，
                    {window.baseConfig.coin_name}等等
                  </p>
                  <p>
                    2、 本活动旨在提升聊天室娱乐的互动性，本互动功能中所获得道具均不可进行撤销、退款或退换，不可兑换成
                    {window.baseConfig.coin_name}、现金、不可再次交易;您承诺不使用本功能进行任何违反法律法规及本平台规则、规范的活动或行为;
                  </p>
                  <p>3、利用漏洞或者是其他非法途径参与本活动，官方有权取消其活动参与资格。</p>
                  <p>4、{window.baseConfig.package_name}有权清除活动中的非法数据。</p>
                  <p>5、活动如有任何疑问请联系{window.baseConfig.package_name}客服。</p>
                  <p>
                    6、活动获得的所有虚拟道具及权益均不可进行转让、交易或变现，{window.baseConfig.package_name}
                    官方有权对任何违规行为进行处理。
                  </p>
                  <p>*在此活动中，APPLE不是赞助者，也没有以任何形式参与活动</p>
                </div>
              </div>
            </div>
          ) : null}
          {type === 2 ? (
            <div className="rank_content">
              <div className="sub_tit">
                <div className="number">排名</div>
                <div className="avatar">头像</div>
                <div className="name">名称</div>
                <div className="point">积分</div>
              </div>
              {rankList.map((item, idx) => (
                <div className="rank_item">
                  <div className={`number a_${idx + 1}`}>{idx + 1}</div>
                  <div className="avatar">
                    <img src={item?.headimgurl} alt="" />
                  </div>
                  <div className="name">{item.nickname}</div>
                  <div className="point">{item.point}</div>
                </div>
              ))}
              {userinfo ? (
                <div className="rank_item fixed">
                  <div className={`number a_${userinfo.my_rank} ${userinfo.my_rank > 10 ? 'un' : ''}`}>
                    {+userinfo.my_rank > 10 ? '未上榜' : +userinfo.my_rank}
                  </div>
                  <div className="avatar">
                    <img src={userinfo?.headimgurl} alt="" />
                  </div>
                  <div className="name">{userinfo.nickname}</div>
                  <div className="point">{userinfo.my_point}</div>
                </div>
              ) : null}
            </div>
          ) : null}
          {type === 3 ? <div className="rule_content"></div> : null}
        </div>
      </div>
    </div>
  )
}
